<template>
  <van-popup v-model="showPopup" position="bottom" :overlay="false">
    <div id='popup-edit' class="edit-popup-wrapper" :style="{ height: pageHeight + 'px' }">
      <div class="items-wrapper">
        <van-field v-model="editValue" :type="type" autofocus :placeholder="placeholder"></van-field>
      </div>
      <div class="button-wrapper">
        <button type="button" @click="confirm" class="btn btn-small btn-yellow">确定</button>
        <button type="button" @click="cancel" class="btn btn-small btn-dark">取消</button>
      </div>
      <slot></slot>
    </div>
  </van-popup>
</template>

<script>

export default {
  name: 'EditPopup',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    value: String,
    placeholder: String,
    showPopup: Boolean,
  },
  data () {
    return {
      editValue: this.value,
      pageHeight: document.body.clientHeight
    }
  },
  created() {
  },
  watch: {
    value: function(newValue) {
      this.editValue = newValue
    },
    showPopup: function(newValue) {
      if (newValue) {
        // 尝试解决安卓手机撑起页面的问题
        this.init()
      }
    }
  },
  methods: {
    init: function() {
      window.onresize = function() {
        document.getElementById('popup-edit').style.height = document.body.clientHeight + 'px'
      }

    },
    confirm: function () {
      this.$emit('confirm', this.editValue)
    },
    cancel: function () {
      this.$emit('cancel')
    },
  }
}

</script>

<style lang="scss" scoped>
  .van-popup {
    background-color: #EFEFEF;
  }

</style>
